<template>
    <div
        :class="['w-full p-24 box-border', { 'min-loading-height': isLoading }]"
        v-loading="isLoading"
        element-loading-text="加载中....."
    >
        <template v-if="!isLoading">
            <!-- 顶部 -->
            <PageHeader
                v-model="headerPopoverVisible"
                title="会员列表"
                is-need-screen
                :is-data-loading="isLoading"
                @refresh="resetList"
                @search="search"
            >
                <SearchBox type='left' title="会员昵称">
                    <el-input v-model="searchParams.username" placeholder="请输入会员昵称" clearable/>
                </SearchBox>
                <SearchBox type='right' title="会员卡号">
                    <el-input v-model="searchParams.memberCardId" placeholder="请输入会员卡号" clearable/>
                </SearchBox>
                <SearchBox type='left' title="手机号">
                    <el-input v-model="searchParams.userPhone" placeholder="请输入手机号" clearable/>
                </SearchBox>
                <SearchBox type='right' title="会员等级">
                    <el-select
                        v-model="searchParams.memberLevel"
                        class="w-full"
                        clearable
                        placeholder="请选择会员等级"
                        :teleported="false"
                    >
                        <el-option
                            v-for="item in memberLevelList"
                            :key="item.id"
                            :label="item.levelName"
                            :value="item.levelType"
                            @click.native.stop
                        />
                    </el-select>
                </SearchBox>
                <SearchBox type="full" title="加入时间">
                    <el-date-picker
                        class="w-full"
                        v-model="searchParams.timeRangeValue"
                        clearable
                        type="daterange"
                        range-separator="至"
                        start-placeholder="起始时间"
                        end-placeholder="结束时间"
                    />
                </SearchBox>
            </PageHeader>
            <template v-if="isNoData"><Empty/></template>
            <template v-else>
                <!-- 会员列表 -->
                <div class="w-full flex-between-items-box flex-wrap">
                    <div
                        class="member-container card-style mb-20 flex-between-items-box common-shadow"
                        v-for="(item, index) in memberList"
                        :key="index"
                    >
                        <MemberDetailCard @updateMemberList="updateMemberList" :member-detail="item"/>
                    </div>
                    <!-- 分页 -->
                    <div class="flex-center-box w-full mt-20">
                        <el-pagination
                            v-model:current-page="pageParams.currentPage"
                            v-model:page-size="pageParams.currentSize"
                            background
                            layout="total, prev, pager, next, jumper, sizes"
                            :total="pageParams.total"
                            :page-sizes="[8, 16, 24]"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        />
                    </div>
                </div>
            </template>
        </template>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { PageParams } from '@/type/common'
import { httpMemberList, MemberDetailData, MemberListSearchParams } from '@api/module/memberManage'
import { httpMemberLevelList, LevelConfig } from '@api/module/memberLevel'
import { timeout } from '@utils/methods'
import PageHeader from '@components/PageHeader/index.vue'
import SearchBox from '@components/SearchBox/index.vue'
import Empty from '@components/Empty/index.vue'
import MemberDetailCard from './components/MemberDetailCard/index.vue'

// 数据是否加载中
const isLoading = ref(true)

// 筛选条件弹窗状态
const headerPopoverVisible = ref(false)

// 无数据
const isNoData = ref(false)

// 会员等级列表
const memberLevelList = ref<LevelConfig[]>([])

// 获取等级列表
const getLevelList = () => {
    isLoading.value = true
    httpMemberLevelList().then(res => {
        if (res.data) memberLevelList.value = res.data.list
        getMemberList()
    })
}

getLevelList()

// 查询内容
const searchParams = reactive<MemberListSearchParams>({
    username: '',
    memberCardId: '',
    userPhone: '',
    memberLevel: null,
    timeRangeValue: [],
    timeRange: []
})

// 分页
const pageParams = reactive<PageParams>({
    currentPage: 1,
    currentSize: 8,
    total: null
})

// 会员列表
const memberList = ref<MemberDetailData[]>([])

/**
 * 获取会员列表
 * */
const getMemberList = () => {
    isLoading.value = true
    httpMemberList({
        ...searchParams,
        ...pageParams
    }).then(res => {
        isNoData.value = !res.data.total
        if (res.data.total) {
            memberList.value = res.data.list.map(item => {
                const { levelName } = <LevelConfig>memberLevelList.value.find(levelItem => levelItem.levelType === item.memberLevel)
                item.memberLevelName = levelName
                return item
            })
            pageParams.total = res.data.total
        } else {
            memberList.value = []
        }
    }).finally(async () => {
        headerPopoverVisible.value = false
        await timeout(500)
        isLoading.value = false
    })
}

// 删除后刷新数据
const updateMemberList = () => {
    pageParams.currentPage = 1
    pageParams.currentSize = 8
    getMemberList()
}

/**
 * 重置数据
 * */
const resetList = () => {
    searchParams.username = ''
    searchParams.memberCardId = ''
    searchParams.userPhone = ''
    searchParams.memberLevel = null
    searchParams.timeRangeValue = []
    searchParams.timeRange = []
    updateMemberList()
}

/**
 * 查询数据
 * */
const search = () => {
    // 如果输入了会员卡号，则校验卡号
    if (searchParams.memberCardId && (searchParams.memberCardId.length !== 8 || !searchParams.memberCardId.startsWith('X'))) {
        // eslint-disable-next-line no-undef
        ElNotification.warning({
            title: '提示',
            message: '会员卡号格式错误，应当以 X 开头，长度为 8 位'
        })
        return
    }
    // 如果输入了手机号，则校验手机号
    if (searchParams.userPhone && !/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(searchParams.userPhone)) {
        // eslint-disable-next-line no-undef
        ElNotification.warning({
            title: '提示',
            message: '手机号格式错误！'
        })
        return
    }
    // 查询前重置页码
    pageParams.currentPage = 1
    pageParams.currentSize = 8
    // 校验通过，请求
    getMemberList()
}

// 当前页码改变
const handleCurrentChange = (currentPage: number) => {
    pageParams.currentPage = currentPage
    getMemberList()
}

// 条数改变
const handleSizeChange = (currentSize: number) => {
    pageParams.currentSize = currentSize
    pageParams.currentPage = 1
    getMemberList()
}
</script>

<style lang="less" scoped>
:deep(.el-range-editor.el-input__wrapper){
    width: 100% !important;
}

.member-container{
    width: calc(50% - 10px);
    height: 220px;
    overflow: hidden;
    transition: all .3s;

    div:nth-child(2n) {
        @apply ml-20;
    }
}

.member-container:hover{
    transform: scale(1.01);
}

</style>
